import React from 'react';
import { Box, Text } from '@nova-hf/ui';
import StepWrapper from 'beta/containers/layout/StepWrapper';
import Endurvirkjun from 'beta/pages/askriftir/[contractId]/skref/greidsludagur/containers/Endurvirkjun';
import { IContext } from 'beta/typings/context';
import { useTranslation } from 'beta/utils/i18n';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { useContractInvoicePeriodEndQuery } from 'typings/graphql';

const COLOR = 'orange';

const Greidsludagur = () => {
  const { t } = useTranslation(['alltSaman']);
  const router = useRouter();
  const customerId = router.query.customerId ?? '';
  const contractId = router.query.contractId ?? '';

  const { data: latestPeriodData } = useContractInvoicePeriodEndQuery({
    variables: {
      input: {
        contractId: contractId.toString(),
      },
    },
  });

  const latestDate = latestPeriodData?.contractsInvoices?.invoices?.[0]?.periodEnd || undefined;

  return (
    <StepWrapper
      color={COLOR}
      returnUrl={`/beta/${customerId}/askriftir/${contractId}`}
      title={t('alltSaman.changePayDay')}
      icon="calendar"
      childrenBottom={
        <Box>
          <Text variant="pSmallRegular" color="grey500" renderAs="span">
            {t('alltSaman.infoAnd')}
          </Text>
          <Text variant="pSmallBold" color={COLOR} renderAs="span">
            <a href="https://www.nova.is/alltsaman/spurningar" target="__blank">
              {''} {t('alltSaman.questions')}
            </a>
          </Text>
        </Box>
      }
    >
      <Endurvirkjun
        currentDate={latestDate ?? ''}
        color={COLOR}
        contractId={contractId.toString()}
      />
    </StepWrapper>
  );
};

Greidsludagur.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    contractId: query.contractId,
    namespacesRequired: ['alltSaman'],
  };
};

export default inject('steps')(observer(Greidsludagur));